<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs, watchEffect } from 'vue'
import mitt from "../../assets/js/mitt"
// 一定是最后一次
// 这里是三种类型，num是简单数据类型，torefs的作用就是解构出来换个响应式的同名，其内部ts规范一定也继承了目标的可读性和可写性
// 绝对是一样的，就是从props.name变成了name，前者在传过来时规定了只读，后者也是只读
// 如果父组件传的是响应式数据，那么这俩和父组件都是响应，只是父组件可以写，这俩不行，传的是简单数据照样只读，父组件那边不响应这边也不响应
// 如果这边想可写这个数据，就要通过.value层面重新整一个响应式数据

// 复杂数据类型和上面的是一模一样的，不过简单数据类型指向内存中的数据，复杂数据类型指向内存的首地址，对变量进行proxy代理，代理的东西是不可写的
// 简单数据类型指向的数据不可写，复杂类型指向的地址也不可写,但是谁去写地址呢，改值，可改！
const props = defineProps(["num", "data","infData","baseData","objData","objReactData"])
const { num, data ,infData,baseData,objData,objReactData} = toRefs(props)
let listData = ref([])

const aaa=reactive({
  b:4
})
watchEffect(()=>{
  console.log(infData.value.name.value);
})
watchEffect(() => {
  console.log(infData);
  // let a=infData.value.name
  // console.log(num.value);
  data.value.forEach(item => {
    if (item.id == num.value) {
      listData.value = item.value
    }
  })
})
// watch(num,(o)=>{
//   console.log(o);
// })
onMounted(()=>{
  console.log(props);
  // setInterval(()=>{
  // console.log(infData.value.name);
  // },1000)
})
// watch(num,(o)=>{
//   num1.value=o

// })



// const subData = () => {
//   mitt.emit("dataEmit", {
//     id: num.value,
//     value: listData.value
//   })
// }

</script>

<template>
  <div class="layout">
    当前选择: 
    <el-input v-model="num" placeholder="" size="normal" clearable @change=""></el-input>
    <!-- {{props.num}} -->
    {{aaa.b}}
    <el-input v-model="aaa.b" placeholder="" size="normal" clearable @change=""></el-input>
    
    <div>
      当前数据:
      <br />
      <el-input v-model="infData.name.value" placeholder="" size="normal" clearable @change=""></el-input>
      <el-input v-model="baseData" placeholder="" size="normal" clearable @change=""></el-input>
      对象：
      <el-input v-model="objData.name" placeholder="" size="normal" clearable @change=""></el-input>
      <el-input v-model="props.objReactData.age" placeholder="" size="normal" clearable @change=""></el-input>
      
      <!-- <template v-for="item in data">
        name:<el-input v-model="item.name" placeholder="" size="normal" clearable @change=""></el-input>
        age:<el-input v-model="item.age" placeholder="" size="normal" clearable @change=""></el-input>
      </template> -->
      <el-button type="danger" size="default" @click="subData">提交</el-button>

    </div>
    <slot name="slotColor"></slot>
  </div>
</template>

<style lang='less' scoped>
.layout {
  border: 5px solid turquoise;
  width: calc(100vw - 4px);
  :deep(.el-input__wrapper) {
    background-color: rgb(28, 18, 140);
  }
  :slotted(div){
    color: antiquewhite;
  }
}
</style>